<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
    <script src="../build/plugin.webgl.mmd.js"></script>
    <script src='../resource/mmd/lib/ammo.js'></script>
</head>

<style>
    canvas {
        border: 1px solid grey;
        background-color: #4caf50;
        /*opacity: 0.01;*/
    }
</style>

<body>
    <canvas id="app" width="600" height="600"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            webgl: {
              light: true,
            },
        });
        $app.start();

        for (var x = 1; x <= 1; x ++) {
            $app.add(new Easycanvas.Sprite({
                style: {
                    left: x * 100, top: 500,
                    zIndex: Math.random(),
                },
                webgl: {
                    imgPaheight: '../resource/mmd/model/mokou/',
                    pmd: '../resource/mmd/model/default/miku_v2.pmd',
                    // pmd: '../resource/c.pmx',
                    // pmd: '../resource/mmd/model/mokou/mokou_A.pmd',
                    rz: 180, ry: 0,
                    scaleX: -20, scaleY: 20, scaleZ: 20,
                }
            }));
        }

        $app.children[0].vmdStart('../resource/mmd/vmd/wavefile_v2.vmd');
    </script>
</body>

